<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			header {
				font-family: 'Lobster', cursive;
				text-align: center;
				font-size: 25px;
			}

			#info {
				font-size: 18px;
				color: #555;
				text-align: center;
				margin-bottom: 25px;
			}

			a {
				color: #074E8C;
			}

			.scrollbar {
				margin-left: 30px;
				float: left;
				height: 160px;
				width: 65px;
				background: #F5F5F5;
				overflow-y: scroll;
				margin-bottom: 25px;
			}

			.force-overflow {
				min-height: 450px;
			}

			#wrapper {
				text-align: center;
				width: 500px;
				margin: auto;
			}

			/*
			 *  样式 1
			 */

			#style-1::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			#style-1::-webkit-scrollbar {
				width: 12px;
				background-color: #F5F5F5;
			}

			#style-1::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
				background-color: #46b8da;
			}

			/*
			 *  样式 2
			*/

			#style-2::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			#style-2::-webkit-scrollbar {
				width: 12px;
				background-color: #F5F5F5;
			}

			#style-2::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
				background-color: #D62929;
			}

			/*
			 *  样式 3
			 */

			#style-3::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}

			#style-3::-webkit-scrollbar {
				width: 6px;
				background-color: #F5F5F5;
			}

			#style-3::-webkit-scrollbar-thumb {
				background-color: #ff908b;
			}

			/*
			 *  样式 4
			 */

			#style-4::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}

			#style-4::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-4::-webkit-scrollbar-thumb {
				background-color: #00d46a;
				border: 1px solid #00c161;
			}


			/*
			 *  样式 5
			 */

			#style-5::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}

			#style-5::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-5::-webkit-scrollbar-thumb {
				background-color: #0ae;
				background-image: -webkit-gradient(linear, 0 0, 0 100%,
					color-stop(.5, rgba(255, 255, 255, .2)),
					color-stop(.5, transparent), to(transparent));
			}


			/*
			 *  样式 6
			 */

			#style-6::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}

			#style-6::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-6::-webkit-scrollbar-thumb {
				background-color: #F90;
				background-image: -webkit-linear-gradient(45deg,
					rgba(255, 255, 255, .2) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, .2) 50%,
					rgba(255, 255, 255, .2) 75%,
					transparent 75%,
					transparent)
			}


			/*
			 *  样式 7
			 */

			#style-7::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
				border-radius: 10px;
			}

			#style-7::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-7::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-image: -webkit-gradient(linear,
					left bottom,
					left top,
					color-stop(0.44, rgb(122, 153, 217)),
					color-stop(0.72, rgb(73, 125, 189)),
					color-stop(0.86, rgb(28, 58, 148)));
			}

			/*
			 *  样式 8
			 */

			#style-8::-webkit-scrollbar-track {
				border: 1px solid black;
				background-color: #F5F5F5;
			}

			#style-8::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-8::-webkit-scrollbar-thumb {
				background-color: #ffc000;
			}


			/*
			 *  样式 9
			 */

			#style-9::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}

			#style-9::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-9::-webkit-scrollbar-thumb {
				background-color: #F90;
				background-image: -webkit-linear-gradient(90deg,
					rgba(255, 255, 255, .2) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, .2) 50%,
					rgba(255, 255, 255, .2) 75%,
					transparent 75%,
					transparent)
			}


			/*
			 *  样式 10
			 */

			#style-10::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
				border-radius: 10px;
			}

			#style-10::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-10::-webkit-scrollbar-thumb {
				background-color: #AAA;
				border-radius: 10px;
				background-image: -webkit-linear-gradient(90deg,
					rgba(0, 0, 0, .2) 25%,
					transparent 25%,
					transparent 50%,
					rgba(0, 0, 0, .2) 50%,
					rgba(0, 0, 0, .2) 75%,
					transparent 75%,
					transparent)
			}


			/*
			 *  样式 11
			 */

			#style-11::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
				border-radius: 10px;
			}

			#style-11::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-11::-webkit-scrollbar-thumb {
				background-color: #3366FF;
				border-radius: 10px;
				background-image: -webkit-linear-gradient(0deg,
					rgba(255, 255, 255, 0.5) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, 0.5) 50%,
					rgba(255, 255, 255, 0.5) 75%,
					transparent 75%,
					transparent)
			}

			/*
			 *  样式 12
			 */

			#style-12::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
				border-radius: 10px;
				background-color: #444444;
			}

			#style-12::-webkit-scrollbar {
				width: 12px;
				background-color: #F5F5F5;
			}

			#style-12::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: #D62929;
				background-image: -webkit-linear-gradient(90deg,
					transparent,
					rgba(0, 0, 0, 0.4) 50%,
					transparent,
					transparent)
			}

			/*
			 *  样式 13
			 */

			#style-13::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
				border-radius: 10px;
				background-color: #CCCCCC;
			}

			#style-13::-webkit-scrollbar {
				width: 12px;
				background-color: #F5F5F5;
			}

			#style-13::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: #D62929;
				background-image: -webkit-linear-gradient(90deg,
					transparent,
					rgba(0, 0, 0, 0.4) 50%,
					transparent,
					transparent)
			}

			/*
			 *  样式 14
			 */

			#style-14::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
				background-color: #CCCCCC;
			}

			#style-14::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-14::-webkit-scrollbar-thumb {
				background-color: #FFF;
				background-image: -webkit-linear-gradient(90deg,
					rgba(255, 132, 123, 1) 0%,
					rgba(255, 132, 123, 1) 25%,
					transparent 100%,
					rgba(255, 132, 123, 1) 75%,
					transparent)
			}

			/*
			 *  样式 15
			 */

			#style-15::-webkit-scrollbar-trac {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				background-color: #F5F5F5;
				border-radius: 10px;
			}

			#style-15::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-15::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: #FFF;
				background-image: -webkit-gradient(linear,
					40% 0%,
					75% 84%,
					from(#4D9C41),
					to(#19911D),
					color-stop(.6, #54DE5D))
			}

			/*
			 *  样式 16
			 */

			#style-16::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				background-color: #F5F5F5;
				border-radius: 10px;
			}

			#style-16::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			#style-16::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: #FFF;
				background-image: -webkit-linear-gradient(top,
					#e4f5fc 0%,
					#bfe8f9 50%,
					#9fd8ef 51%,
					#2ab0ed 100%);
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="scrollbar" id="style-default">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-1">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-2">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-3">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-4">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-5">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-6">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-7">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-8">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-9">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-10">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-11">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-13">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-14">
				<div class="force-overflow"></div>
			</div>

			<div class="scrollbar" id="style-15">
				<div class="force-overflow"></div>
			</div>
		</div>
	</body>
</html>
